<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资金转赠</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/common.css" rel="stylesheet">
    <style>
        .content{
            padding: 0 6vw;
            background-size:100% 100%;
        }
        .head-content{
            margin: 10px 0px;
            height: 80px;
        }
        .head-img{
            float: left;
            width: 75px;
            line-height: 75px;
        }
        .head-img img{
            height: 60px;
            width: 60px;
            border-radius: 50%;
            vertical-align: middle;
        }
        .head-info{
            float: left;
        }
        .head-info div{
            margin: 10px 0px;
        }
        .form-line{
            margin-bottom: 10px;
        }
        .left-label{
            display: inline-block;
            height: 30px;
            background: #3bb2ed;
            color: #fff;
            line-height: 30px;
            width: 29%;
            text-align: center;
        }
        .right-input{
            border: 1px solid #42b8f3;
            height: 28px;
            line-height: 28px;
            width: 99%;
            text-align: center;
        }
        .wd-69{
            width: 69%;
            vertical-align: middle;
        }
        .ok-btn{
            height: 33px;
            background: #3bb2ed;
            color: #fff;
            line-height: 33px;
            text-align: center;
        }
        .small-img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            vertical-align: middle;
        }
        .accept-name{
            max-width: 25vw;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
        .valid-yes{
            line-height: 28px;
            background: #fdfdfd;
            border: 1px solid #18adf7;
            color: #13aaf6;
            padding: 0px 8px;

        }
        .valid-no{
            line-height: 28px;
            background: #fdfdfd;
            border: 1px solid #ff560a;
            color: #fa5706;
            padding: 0px 8px;

        }
    </style>
</head>
<body>

<div class="head-nav">
    <div class="nav-left" onclick="javascript:history.back(-1)"><img src="img/gua/u18.png"></div>
    <div class="nav-title">资金转赠</div>
</div>
<div class="main">
    <div class="content">
        <div class="head-content">
            <div class="head-img"><img id="userPic" src="img/gua/g1.jpg"></div>
            <div class="head-info">
                <div><span id="nickName">昵称</span></div>
                <div>账户余额：<span id="money">-</span>元</div>
            </div>
        </div>
        <div class="form-line">
            <div  class="left-label">对方帐号</div>
            <div class="in-block wd-69"><input class="right-input" type="number" id="hisPhone" onchange='validPhone(this)' placeholder="请输入对方手机号码"></div>
        </div>
        <div class="form-line" id="acceptDiv" style="display: none">
            <div  class="left-label">受赠人信息</div>
            <div class="in-block wd-69">
                <div class="fl-left" id="validMsg">
                    <span><img class='small-img' src='img/gua/g1.jpg'></span>
                    <span id='acceptName' class='accept-name'></span>
                </div>
                <div class="fl-right">
                    <div id="validFlag" class="valid-yes">有效用户</div>
                </div>
            </div>
        </div>
        <div class="form-line">
            <div class="left-label">转赠金额</div>
            <div class="in-block wd-69"><input class="right-input" type="number" id="hisMoney" placeholder="请输入转赠金额"></div>
        </div>
        <div style="height: 2vh"></div>
        <div class="ok-btn" onclick="transferMoney()">转&nbsp;&nbsp;&nbsp;&nbsp;赠</div>
    </div>
</div>

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

<script type="application/javascript">
    $(function () {
        getopenid();
        opendIdLogin();
    });

    //验证手机号用户是否存在
    function validPhone(me) {
        var hisPhone = $(me).val();
        if(hisPhone.length==11){
            //检查手机号是否合法
            var hisPhone = $("#hisPhone").val();
            if(!Common.isPhoneNumber(hisPhone)){
                layer.msg("请输入正确的手机号！");
                return;
            }
            //后台检查
            //......
            var paramStr = {};
            paramStr.phoneNum = hisPhone;
            var params = {};
            params.paramStr = JSON.stringify(paramStr);
            $.ajax({
                type: "post",
                data:params,
                url:'/fenful/api/v1/common/getUser',
                datatype: "json",
                success: function(re) {
                    if(re.code == "200") {
                        var data = eval('(' + re.data + ')');
                        var imgUrl = data.headImg;
                        var hisName = data.nickName;
                        var str="<span><img class='small-img' src='"+imgUrl+"'></span><span id='acceptName' class='accept-name'>"+hisName+"</span>";
                        $("#validMsg").empty();
                        $("#validMsg").append(str);
                        $("#validFlag").removeClass("valid-no");
                        $("#validFlag").addClass("valid-yes");
                        $("#validFlag").text("有效用户");
                        $("#acceptDiv").show();
                    }else{
                        var str = "<span style='line-height: 30px'>未检查到受赠人</span>";
                        $("#validMsg").empty();
                        $("#validMsg").append(str);
                        $("#validFlag").removeClass("valid-yes");
                        $("#validFlag").addClass("valid-no");
                        $("#validFlag").text("无效用户");

                        $("#acceptDiv").show();
                    }

                },
                error: function(re) {
                    var str = "<span style='line-height: 30px'>未检查到受赠人</span>";
                    $("#validMsg").empty();
                    $("#validMsg").append(str);
                    $("#validFlag").removeClass("valid-yes");
                    $("#validFlag").addClass("valid-no");
                    $("#validFlag").text("无效用户");

                    $("#acceptDiv").show();
                }
            })

        }
    }

    var openid,phoneNum,token,userId,money;
    function getopenid() {
        openid = window.localStorage.getItem("openid");
        if(openid == null || openid == undefined || openid == '') {
            getCode();
        }
    }
    function getCode() {
        var code = Common.queryGetParam('code');
        if(code == null || code == undefined || code == '') {
            location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx95bdc635798fcfe4&redirect_uri="+window.location.href+"&response_type=code&scope=snsapi_base#wechat_redirect";
            return;
        }
        var paramStr = {};
        paramStr.code = code;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/common/getWxUserOpenId", params, function(data) {
            openid = data.openid;
            window.localStorage.setItem("openid", data.openid);
        },false);
    }
    function opendIdLogin() {
        var paramStr = {};
        paramStr.wxOpenId = openid;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/login/wxOpenIdLoginOrRegister", params, function(data) {
            $("#nickName").text(data.nickName);
            $("#money").text(data.money);
            $("#userPic").attr("src",data.headImg);
            token = data.token;
            userId = data.userId;
            money = data.money;
            $.cookie("userId",data.userId,{expires:7,path:"/"});
            $.cookie("token",data.token,{expires:7,path:"/"});
            if(data.phoneNum){
                phoneNum = data.phoneNum;
                window.localStorage.setItem("phoneNum", data.phoneNum);
            }

            console.log(data);
        },false);
    }


    //赠送金额
    function transferMoney() {
        //检查手机号是否合法
        var hisPhone = $("#hisPhone").val();
        if(!Common.isPhoneNumber(hisPhone)){
            layer.msg("请输入正确的手机号！");
            return;
        }
        if(phoneNum == hisPhone){
            layer.msg("不能转给自己！");
            return;
        }
        var hisMoney = $("#hisMoney").val();
        //检查金额是否合法
        var reg=/^[1-9]+\d*$/;
        if(!reg.test(hisMoney)){
            layer.msg("请输入整数金额！");
            return;
        }
        if(money<parseInt(hisMoney)){
            layer.msg("余额不足！");
            return;
        }

        layer.confirm('是否赠送?', {icon: 3, title:'提示'}, function(index){
            var paramStr = {};
            paramStr.userId = userId;
            paramStr.hisPhone = hisPhone;
            paramStr.hisMoney = hisMoney;
            var params = {};
            params.paramStr = JSON.stringify(paramStr);
            var ii = layer.load();
            $.ajax({
                headers: {"phone":phoneNum,"token":token},
                type: "post",
                data:params,
                url:'/fenful/api/v1/account/transferMoney',
                datatype: "json",
                async: false,
                success: function(re) {
                    if(re.code == '200'){
                        layer.close(ii);
                        layer.msg("转赠成功！");
                        setTimeout(function () {
                            location.reload()
                        },1500);
                    }else{
                        layer.close(ii);
                        layer.msg(JSON.stringify(re.message));
                        layer.close(index);
                    }

                },
                error: function(re) {
                    layer.close(ii);
                    layer.msg(JSON.stringify(re));
                    layer.close(index);
                }
            })
        });


    }
</script>
</body>
</html>